<div class="row">

  <div class="col-sm-12 col-xs-12">
    <!------------标题栏---------------->
    <h3>成员</h3>
    <hr/>
    <br/>
  </div>

</div>

<div class="row">
  <div class="col-sm-2 col-xs-2">
    <a ui-sref="project.show.member.creating" class="btn btn-success btn-block" style="margin-bottom: 1em" ng-show="editable">添加新的成员</a>

    <filter-on-cond conditions="conditions" condition-obj="conditionObj" ></filter-on-cond>
  </div>

  <div class="col-sm-8 col-xs-8">

    <div class="panel panel-primary" ng-show="!conditionObj.role">
      <div class="panel-heading">
        项目拥有者
      </div>

      <!--------------成员列表------------------>
      <ul class="list-group member-setting-list">
        <!---------单成员列--------->
        <li class="list-group-item">
          <img ng-src="img/userHeadImage/{{creater.head_image}}" alt="{{creater.username}}" class="img-circle member-head"/>
          <span class="member-name lead text-primary">{{creater.username}}</span>
          <div class="right-box" ng-show="currentUserId == creater.id">
            <span class="text-info lead bg-info" style="margin-right: 0.5em">您自己！</span>
          </div>
        </li>
      </ul>

    </div>

    <div class="panel panel-primary"
         ng-repeat="role in roles"
         ng-show="roleMember[role.id].length && (!conditionObj.role || role.id == conditionObj.role)"
      >
      <div class="panel-heading">
        {{role.label}} ({{roleMember[role.id].length}})
      </div>

        <!--------------成员列表------------------>
        <ul class="list-group member-setting-list">
          <!---------单成员列--------->
          <li class="list-group-item"
              ng-repeat="curMember in roleMember[role.id]"
            >
            <img ng-src="img/userHeadImage/{{curMember.head_image}}" alt="{{curMember.username}}" class="img-circle member-head"/>
            <span class="member-name lead text-primary">{{curMember.username}}</span>
            <!--列右边部分, 当用户拥有修改角色权限的时候显示-->
            <div class="right-box" ng-show="editable && currentUserId != curMember.id">
              <select id="role-selection" class="form-control"
                      ng-options="roleSelected.id as roleSelected.label for roleSelected in roles"
                      ng-model = "curMember.role_id"
                      ng-change="changeMemberRole(curMember,role.id,curMember.role_id)">

              </select>
              <button class="btn btn-danger member-cancel" ng-click="deleteMember(curMember.id)">删除</button>
            </div>
            <!--列右边部分, 列表所示用户是当前登陆用户的时候显示-->
            <div class="right-box" ng-show="currentUserId ==curMember.id">
              <span class="text-info lead bg-info" style="margin-right: 0.5em">您自己！</span>
            </div>
          </li>
        </ul>

    </div>

  </div>
</div>